<template>
  <el-container>
    <el-header>
      <!--头部-->
      <Header></Header>
    </el-header>
    <br>
    <el-main>
      <!--搜索-->
      <Search :num="carNum"></Search>
      <el-steps :active="1" finish-status="success" simple style="margin-top: 20px">
        <el-step title="查看购物车" ></el-step>
        <el-step title="确认订单信息" ></el-step>
        <el-step title="成功提交订单" ></el-step>
      </el-steps>
      <br>
      <h1>购物车列表</h1>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column label="图片" style="width: 100px">
          <template slot-scope="scope">
            <img :src="require('../../assets/images/'+scope.row.src)" width="50" height="50">
          </template>
        </el-table-column>
        <el-table-column label="商品名称" prop="goodsName" style="width: 60%"></el-table-column>
        <el-table-column label="单价" prop="price" width="100px"></el-table-column>
        <el-table-column label="购买数量" width="300px">
          <template slot-scope="scope">
            <el-input-number v-model="scope.row.num" @change="countTotalPrice"></el-input-number>
          </template>
        </el-table-column>
        <el-table-column label="小计" width="100px">
          <template slot-scope="scope">
            <span>{{scope.row.price*scope.row.num}}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="100px">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div align="right" style="padding-top: 5px">
          <el-tag  type="primary">商品总价:{{totalPrice}}</el-tag>
          <el-button type="primary" size="small">继续购物</el-button>
          <el-button type="primary" size="small" @click="toBuyCartwo">确认结算</el-button>
      </div>
    </el-main>
    <Footer></Footer>
  </el-container>
</template>

<script>
  import Header from "./myComponents/Header";
  import Search from "./myComponents/Search";
  import Footer from "./myComponents/Footer";
  export default {
    name: "buyCar",
    components:{
      Header,
      Search,
      Footer
    },
    data(){
      return{
        tableData:[],
        carNum:0,//购物车数量
        totalPrice:0//总价
      }
    },
    methods:{
      countTotalPrice(){//计算总价

        if(this.tableData.length > 0){
          //初始化总价
          this.totalPrice =0;
           for(var i=0;i<this.tableData.length;i++){
              this.totalPrice += this.tableData[i].price*this.tableData[i].num;
           }
        }
      },
      toBuyCartwo(){
        this.$router.push("/buyCarTwo");
      },
      loadData(){//查询我的购物车
           const self = this;
           const http = this.$http.get("/car/queryCar");
           //成功调用
           http.then(function (rs) {
                 if(rs.data.code==200){
                    self.tableData = rs.data.data;
                    //计算总价
                    self.countTotalPrice();
                   //更改购物车的数量
                   console.log("=="+self.tableData.length);
                   self.carNum =  self.tableData.length;
                 }else{
                   //清空
                   self.tableData =[];
                   self.$message("你的购物车没有数据");
                 }
           })

      },
      handleDelete(row){ //删除购物车
        const self = this;
        //确认提
        this.$confirm('你确定要删除, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          const http = this.$http.get("/car/delCar",{params:{"goodsId":row.goodsId}});
          //成功调用
          http.then(function (rs) {
            if(rs.data.code==200){
              self.loadData();

            }else{
              self.$message("删除失败");
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });

      }
    },
    mounted() {
       this.loadData();
    }


  }
</script>

<style scoped>

</style>
